<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>商品卡片布局</title>
		<style>
			/* 思路：1.去除元素默认外边距【通配选择器】设置背景颜色
			         2.product_card 设置样式  内边距 边框设置颜色 倒角 
					   加阴影，所有内容居中：text-align：center
					 3.图片边框倒角，外边距？
					 4.小米 su7  文字  外边距？
					 5.￥279999.00  文字大小，外边距？
					 6.颜色 外边距？内边距？*/
			div{
				width: 300px;
				height: 500px;
				border: 1px solid floralwhite;
				padding: 40px;
				background-color: whitesmoke;
				border-radius: 10px;
				box-shadow: 1px 1px 1px 1px black;
			}
			img{
				border-radius: 6px;
			}
			h3{
				text-align: center;
				margin: 10px;
			}
			p{
				text-align: center;
				margin: 10px;
			}
			span{
				color: darkgrey;
				text-align: center;
				font-size: 16px;
			}
		</style>
	</head>
	<body>
		<div id="product_card">
			<img src="img/海报.jpg" alt="su7" width="260px" height="358px">
			<h3>小米su7</h3>
			<p style="color: red; font-size: 18px;">￥279999.00</p>
			<p style="color:darkgrey;">已有<span>10万+</span>人评价</p>
		</div>
	</body>
</html>